<!--
 * @Author: wangding
 * @Date: 2020-11-11 15:58:31
 * @LastEditTime: 2021-03-15 15:15:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\sale\add.vue
-->
<template>
    <div class="buyPage-main-box-add">
        <el-dialog
                :title="$t('add')"
                :visible="newVisibleGroup"
                width="35%"
                @close="()=>{$store.commit('setNewVisibleGroup',false)}"
                :close-on-click-modal='false'
        >
            <el-row :gutter="20">
                <el-col :span="19" :offset="1">
                    <el-form ref="form" :model="form" label-width="200px">
                        <el-form-item :label="$t('group.instructionsG')" prop="groupId"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.groupId" filterable :placeholder="$t('pleaseSelect')" clearable
                                       style="width:100%">
                                <el-option
                                        v-for="item in groupList"
                                        :key="item.sid"
                                        :label="item.name"
                                        :value="item.sid">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item :label="$t('group.instructionsType')" prop="groupType"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.groupType" filterable :placeholder="$t('pleaseSelect')" clearable
                                       style="width:100%" @change='setupTypeChange'>
                                <el-option
                                        v-for="item in typeList"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if='form.groupType === "0"' :label="$t('group.integrated')" prop="setupType"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.setupType" filterable :placeholder="$t('pleaseSelect')" clearable
                                       style="width:100%">
                                <el-option
                                        v-for="item in CtypeList"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if='form.groupType == 1' :label="$t('group.sysTarget')" prop="systemType"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.systemType" filterable :placeholder="$t('pleaseSelect')" clearable
                                       style="width:100%">
                                <el-option
                                        v-for="item in onOffList"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>


                        <el-form-item v-if='form.setupType == 1' :label="$t('group.haveTarget') + '(W)'" prop="one"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.one"></el-input>
                        </el-form-item>
                        <el-form-item v-if='form.setupType == 1' :label="$t('group.noTarget') + '(Var)'" prop="two"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.two"></el-input>
                        </el-form-item>
                        <el-form-item v-if='form.setupType == 1' :label="$t('group.pTime') + '(S)'" prop="three"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.three"></el-input>
                        </el-form-item>

                        <el-form-item v-if='form.setupType == 2 || form.setupType == 3'
                                      :label="$t('group.isTypeTarget')" prop="one"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-select v-model="form.one" filterable :placeholder="$t('pleaseSelect')" clearable
                                       style="width:100%">
                                <el-option
                                        v-for="item in setupTypeList"
                                        :key="item.id"
                                        :label="item.text"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if='form.setupType == 2' :label="$t('group.aTarget') + '(Wh)'" prop="two"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.two"></el-input>
                        </el-form-item>
                        <el-form-item v-if='form.setupType == 3' :label="$t('group.capacityTarget') + '(%)'" prop="two"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.two"></el-input>
                        </el-form-item>
                        <el-form-item v-if='form.setupType == 2 || form.setupType == 3'
                                      :label="$t('group.powerTarget') + '(W)'" prop="three"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.three"></el-input>
                        </el-form-item>


                        <el-form-item v-if='form.setupType == 1 || form.setupType == 2||form.setupType == 3'
                                      :label="$t('group.overtime') + '(S)'" prop="four"
                                      :rules="[{ required: true, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.four"></el-input>
                        </el-form-item>


                        <el-form-item :label="$t('group.InstructionsMsg')" prop="explain"
                                      :rules="[{ required: false, message: $t('index_js_notNull')}]">
                            <el-input type='text' v-model="form.explain"></el-input>
                        </el-form-item>

                    </el-form>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="()=>{$store.commit('setNewVisibleGroup',false)}">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="save('form')">{{$t('sure')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        components: {},
        props: {
            addValueList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            selectDataList: {
                type: Array,
                default: () => {
                    return []
                }
            },
            inverterType: {
                type: String,
                default: ''
            },
            scope: {
                type: String,
                default: ''
            },
        },
        data() {
            return {
                typeList: [{
                    id: '0',
                    text: this.$t('group.integrated')
                }, {
                    id: '1',
                    text: this.$t('group.andIntegrated')
                }],
                onOffList: [{
                    id: '0',
                    text: this.$t('group.noControl')
                }, {
                    id: '1',
                    text: this.$t('group.yesControl')
                }],
                setupTypeList: [{
                    id: '1',
                    text: this.$t('group.setControl')
                }, {
                    id: '2',
                    text: this.$t('group.updateControl')
                }],
                CtypeList: [{
                    id: '0',
                    text: this.$t('version.versionService.forbidden')
                }, {
                    id: '1',
                    text: this.$t('group.powerControl')
                }, {
                    id: '2',
                    text: this.$t('group.aControl')
                }, {
                    id: '3',
                    text: this.$t('group.SOCControl')
                }],
                form: {
                    groupId: "",
                    groupType: "",
                    setupType: "",
                    systemType: "",
                    explain: "",
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                },
                groupList: []
            };
        },
        computed: {
            newVisibleGroup() {
                return this.$store.state.sysStore.newVisibleGroup
            }
        },
        watch: {},
        created() {

        },
        mounted() {
            this.vppgroupGetGroupList()
        },
        methods: {
            setupTypeChange() {
                if (this.form.groupType == 1) {
                    this.form.setupType = ''
                } else if (this.form.groupType === "0") {
                    this.form.systemType = ''
                } else {
                    this.form.setupType = ''
                    this.form.systemType = ''
                }

            },
            async vppgroupGetGroupList() {
                let res = await this.API.vppgroupGetGroupList({
                })
                this.groupList = res.object || []
            },
            returnParamsSet() {
                let str = ''
                if (this.form.groupType === '0') {
                    if (this.form.setupType === '0') {
                        str = `${this.form.setupType}`
                    }
                    if (this.form.setupType == 1 || this.form.setupType == 2 || this.form.setupType == 3) {
                        str = `${this.form.setupType},${this.form.one},${this.form.two},${this.form.three},${this.form.four}`
                    }
                }
                if (this.form.groupType == 1) {
                    // if (!this.form.systemType) {
                        str = `${this.form.systemType}`
                    // }
                }
                return str
            },
            async vppinstructionAddEntity() {
                let res = await this.API.vppinstructionAddEntity({
                    type: this.form.groupType,
                    groupId: this.form.groupId,
                    msg: this.form.explain,
                    paramsSet: this.returnParamsSet()
                })
                if (!res.success) {
                    this.comm.showMsg(false, this.$t('index.control_fail'))
                } else {
                    this.comm.showMsg(true, this.$t('index.control_success'))
                    this.$store.commit('setNewVisibleGroup', false)
                    this.$emit('uploadData', true)
                }
            },
            save(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.vppinstructionAddEntity()
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
    };
</script>

<style lang="less">
    .buyPage-main-box-add {
        .el-form-item__content {
            display: flex;
        }

        .icon-fontsize {
            font-size: 25px;
            margin-left: 10px;
            display: block;
            width: 25px;
            height: 33px;
        }
    }
</style>
